<template>
  <div>
    <div class="contents">
      <div class="left-box">
        <div class="left-item" @click="getdetails">
          <dv-border-box-12 class="left-box-item">
            <p>公司名称：{{data.company_name}}</p>
            <p>管理员：{{ userList.join(', ') }}</p>
            <p>联系方式：{{ mobileList.join(', ') }}</p>
            <p>巡检数：{{data.xunjian_count}}</p>
            <div class="icon">
              <i class="el-icon-right"></i>
            </div>
          </dv-border-box-12>
        </div>
        
      </div>
     
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import type { DefaultConfigType } from "./index.d";
import { cloneDeep } from "lodash-es";
import { merge } from "lodash-es";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const userList = ref([]);
const mobileList = ref([]);
const props = withDefaults(
    defineProps<{
        config: object | any;
        data: Array<{
            name: string;
            value: string | number;
        }>;
    }>(),
    {
        config: () => { },
        data: () => [],
    }
);
watch(
    () => props.data,
    (newval: any) => {
        //calcData();
    },
);
watch(
    () => props.config,
    (newval: any) => {
        //calcData();
    },
);
onMounted(() => {
    calcData();
});
const calcData= () => {
  
  if(props.data.super_list.length>0){
    for(let i = 0;i<props.data.super_list.length;i++){
     userList.value.push(props.data.super_list[i].user_name) ;
     mobileList.value.push(props.data.super_list[i].mobile) ;
    }
  }
}
const getdetails= () => {
      console.log("跳转详情页");
      
      router.push({ 
        path: '/detail',
        query: {
          id: props.data.company_id
        }
         })
    }
</script>

<style lang="scss" scoped>
.contents{
  // width: 100%;
  // height: 100%;
  // display:flex;
  margin-top: 30px;
  overflow:hidden;
  .left-box{
    width: 100%;
    height: 200px;
    //overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  
    // 隐藏滚动条
    -ms-overflow-style: none; // IE 10+
    overflow: -moz-scrollbars-none; // Firefox
    &::-webkit-scrollbar { width: 0 !important } // chrome 和Safari
    //scrollbar-width: none; 
    
    .left-item{
      box-sizing: border-box;
      width: 100%;
      height: 300px;
      // position: relative;
      .left-box-item{
        box-sizing: border-box;
        // width: 25%;
        // height: 300px;
        padding: 10px;
        position: relative;

        p{
          margin: 0px 0px 10px 10px;
        }
        .icon{
          position: absolute;
          bottom: 30px;
          right: 30px;
        }
      }
    } 
  }

  .right-box{
    width: 30%;
    height: 990px;
    // background: blueviolet;
  }
  
}
</style>  